
/**
var vm = new Vue({   // vm: viewmodel； 表示界面与数据的绑定
    el: '#app',   // el 代表元素标签的意思； 表示要操作的表单标签是app
    data:{
        username:'',
        password2:'',

    },
    methods:{
        check_username: function () {

        },
        check_pwd: function () {

        }
    },
    // vue创建的生命周期的勾子函数
    // 用法： 在js.Vue替换html模板内容后，发起请求服务器数据获取首页，再把首页数据初始化界面显示,也就是校验完后注册成功跳转到首页

    mounted: function () {

    }
});
 */


var vm = new Vue({
    el: '#app',
    data: {
        // var host = 'http://127.0.0.1:8000';
        // z这样定义就需要每个js文件中都需要修改，这样不便  所以把它定义到一个单独的js文件里host.js
        // host:'http://127.0.0.1:8000',

        host,         // host: host,的简化写法   引用host.js里的host变量
        error_name: false,
        error_password: false,
        error_check_password: false,
        error_phone: false,
        error_allow: false,
        error_sms_code: false,

        username: '',
        password: '',
        password2: '',
        mobile: '',
        sms_code: '',
        allow: false,

        sms_code_tip: '获取短信验证码',
        sending_flag: false, 			// 正在发送短信标志
        error_name_message: '', 		// 用户名错误提示
        error_phone_message: '', 		// 手机号错误提示
        error_sms_code_message: '' 		// 短信验证码错误
    },

    methods: {
        check_username: function () {
            let len = this.username.length;
            if (len < 5 || len > 20) {
                this.error_name_message = '请输入5-20个字符的用户名';
                this.error_name = true;
            } else {
                this.error_name = false;
            }

            // 检查重名  请求服务器，判断我们注册的用户名是否在redis中存在
            if (!this.error_name) {  //用三个===等于号会判断类型和值   也可以用(this.error_name === false)
                var config = {
                    responseType: 'json'
                };
                axios.get(this.host + '/usernames/' + this.username + '/count/',config)

                    .then(response => {
                        if (response.data.count > 0) {
                            this.error_name_message = '用户名已存在';
                            this.error_name = true;
                        } else {
                            this.error_name = false;
                        }
                    })
                    .catch(error => {
                        console.log(error.response.data);
                    })
            }
        },

        check_pwd: function () {
            let len = this.password.length;
            if (len < 8 || len > 20) {
                this.error_password = true;
            } else {
                this.error_password = false;
            }
        },
        check_cpwd: function () {
            if (this.password !== this.password2) {
                this.error_check_password = true;
            } else {
                this.error_check_password = false;
            }
        },
        check_phone: function () {
            let re = /^1[345789]\d{9}$/;
            if (re.test(this.mobile)) {
                this.error_phone = false;
            } else {
                this.error_phone_message = '请输入正确的手机号码';
                this.error_phone = true;
            }
        },
        check_sms_code: function () {
            if (!this.sms_code) {
                this.error_sms_code = true;
            } else {
                this.error_sms_code = false;
            }
        },
        check_allow: function () {
            if (!this.allow) {
                this.error_allow = true;
            } else {
                this.error_allow = false;
            }
        },

        // 发送短信验证码功能
        send_sms_code: function () {
            // 如果显示了短信验证码出错提示, 则隐藏它
            this.error_sms_code = false;
             //alert('发送短信失败')

            if (this.send_sms_flag){
                return
            }

            this.check_phone();
            if (this.error_phone) {
            // 短信验证码校验出错,发送不成功，不在下发短信的60秒的倒计时内，可以再点击发送
                this.send_sms_flag = false;
                return
            }

            this.send_sms_flag = true; // 状态：正在下发短信在60秒的倒计时内，不能再点击发送


            // 请求的路由地址并把填写的手机号传过去
            // this host 请求的服务器路径  封装成一个变量放在另一个host.js全局文件中
            axios.get(this.host + '/sms_codes/'+ this.mobile +'/')  // 接口 接口接口
                .then(response => {
                    console.log('获取短信验证码成功');

                    // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
                    var num = 60;
                    // 设置一个计时器
                    var t = setInterval(() => {
                        if (num == 1) {
                            // 如果计时器到最后, 清除计时器对象
                            clearInterval(t);
                            // 将点击获取验证码的按钮展示的文本恢复成原始文本
                            this.sms_code_tip = '获取短信验证码';
                            // 将点击按钮的onclick事件函数恢复回去
                            this.sending_flag = false;
                        } else {
                            num -= 1;
                            // 展示倒计时信息 sms_code_tip需要替换到模板的发送短信按钮上，展示倒计时
                            this.sms_code_tip = num + '秒';
                        }
                    }, 1000, 60);
                })
                .catch(error => {
                    // 显示出错信息，不在下发短信的60秒的倒计时内，可以再点击发送
                    this.error_sms_code = true;
                    // sms_code_message 替换到模板的提示页面去提示短信验证码出错
                    this.error_sms_code_message = error.response.data.message;
                    this.send_sms_flag = false;

                })
        },

        // 注册  检查注册输入的所有表单数据是否正确并做出相应的提示
        on_submit: function () {
            this.check_username();
            this.check_pwd();
            this.check_cpwd();
            this.check_phone();
            this.check_sms_code();
            this.check_allow();
            alert('发送短信失败')

            // 测试使用　　测试客户端页面保存用户状态信息　　临时存储与永久存储的区别
            localStorage.name = 'localStorage'
            sessionStorage.name2 = 'sessionStorage'

            if (this.error_name === false &&
                this.error_password === false &&
                this.error_check_password === false &&
                this.error_phone === false &&
                this.error_sms_code === false &&
                this.error_allow === false) {
                // 发送axios请求
                let data = {
                    username: this.username,
                    password: this.password,
                    password2: this.password2,
                    mobile: this.mobile,
                    sms_code: this.sms_code,
                    allow: this.allow
                };
                axios.post(this.host + '/users/',data)
                    .then(response => {
                        // todo:保存用户登陆状态信息　id, ｕｓｅｒｎａｍｅ, token
                        // 先清除之前登录过的用户信息　临时跟永久的都清除再保存
                        localStorage.clear();
                        sessionStorage.clear();
                        localStorage.user_id = response.data.id
                        localStorage.username = response.data.username
                        localStorage.token = response.data.token


                        // 注册成功，进入到首页
                        location.href = '/index.html'
                    })
                    .catch(error => {
                        if (error.response.status === 400) {
                            if ('non_field_errors' in error.response.data) {
                                this.error_sms_code = true;
                                // 短信验证码不正确
                                this.error_sms_code_message = error.response
                                    .data.non_field_errors[0];
                            } else {
                                alert('注册失败')
                            }
                        } else {
                            alert('注册失败')
                        }
                    })
                }
            }
        }
    });
